import * as THREE from "three";

/**
 * 创建一个BufferGeometry实例用于存储几何数据
 */
const geometry = new THREE.BufferGeometry();

/**
 * 定义顶点坐标数据
 * 包含4个顶点的三维坐标（x, y, z）：
 * - 原点 (0, 0, 0)
 * - 右侧点 (100, 0, 0)
 * - 上方点 (0, 100, 0)
 * - 右上角点 (100, 100, 0)
 */
const vertices = new Float32Array([0, 0, 0, 100, 0, 0, 0, 100, 0, 100, 100, 0]);

/**
 * 创建顶点属性对象并绑定到几何体
 * 将顶点数据映射为每顶点三维坐标(position属性)
 */
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute;

/**
 * 定义索引数据用于构建三角形面片
 * 使用两个三角形构成矩形面：
 * - 第一个三角形连接顶点0-1-2
 * - 第二个三角形连接顶点2-1-3
 */
const indexes = new Uint16Array([0, 1, 2, 2, 3, 1]);
geometry.index = new THREE.BufferAttribute(indexes, 1);

/**
 * 创建基础网格材质
 * 配置为橙色显示且不受光照影响的基础材质
 */
const material = new THREE.MeshBasicMaterial({
  color: new THREE.Color("orange"),
  side: THREE.DoubleSide, //默认正面可见。设置这个属性就可以双面可见
});

/**
 * 创建网格对象并导出
 * 将几何数据与材质结合生成可渲染的网格实体
 */
const mesh = new THREE.Mesh(geometry, material);

export default mesh;
